<template>
  <div class="low-carbon-material-list">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <div class="g-flex">
          <el-button
            @click="handleAddOrEdit"
            type="primary"
            v-btnPermission="'TAA_VIEW_INSPECT_LIST_ADD'"
          >
            <CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>
            新增
          </el-button>
        </div>
      </template>
      <template #dischargeUnitSolt="{ scope }">
        <CLink v-if="hasBtnPermission('PCF_MODEL_VIEW')" @click="goDetail(scope.row)">{{
          empty(scope.row.dischargeUnit)
        }}</CLink>
        <span v-else>{{ empty(scope.row.dischargeUnit) }}</span>
      </template>
      <template #quotaGapSlot="{ scope }">
        {{ empty(scope.row.quotaGap) }}
        <template v-if="scope.row.gapProportion || typeof scope.row.gapProportion === 'number'">
          ({{ formatNumToRate(scope.row.gapProportion) }})
        </template>
      </template>

      <template #successNumHeaderSlot>
        <div class="g-flex-center-center">
          <span>履约进度</span>
          <el-tooltip content="已履约单位数/需履约单位总数" placement="top">
            <CIcon
              class="g-ml4 g-cur-poi inventory-task-list-table-icon"
              type="c-xian-shuoming"
            ></CIcon>
          </el-tooltip>
        </div>
      </template>
      <template #successNumSlot="{ scope }">
        {{ `${empty(scope.row.successNum)} / ${empty(scope.row.totalNum)}` }}
      </template>

      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddDialog
      v-model:visible="formDialogVisible"
      :tempRow="tempRow"
      :dischargeUnitOption="dischargeUnitOption"
      @refresh="refresh"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: 'InspectList'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { CLink } from '@/components/CLink';
import AddDialog from './components/AddDialog/index.vue';

import { deleteInspectTask } from '@/apis/taa/asset/inspect';
import type { GetInspectListResult } from '@/apis/taa/asset/model/inspectModel';
import { useInspectList } from './useInspectList';
import { empty, formatNumToRate } from '@/utils';
import { hasBtnPermission } from '@/directives/btnPermission';
import { useMessage } from '@/hooks/useMessage';
import { useRouter } from 'vue-router';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';

const router = useRouter();
const { createMessage, createConfirm } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting, dischargeUnitOption } =
  useInspectList();
const options = reactive<CPageTableProps>({
  title: '核查与履约',
  searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh }] = useCPageTable(options);
useKeepAliveRefresh(refresh);

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetInspectListResult): TableButtonItem[] {
  const res = [];
  res.push({
    text: '编辑',
    btnPermission: 'TAA_VIEW_INSPECT_LIST_EDIT',
    onClick: () => handleAddOrEdit(row)
  });
  if (row.successNum === 0) {
    res.push({
      text: '删除',
      btnPermission: 'TAA_VIEW_INSPECT_DELETE',
      onClick: () => handleDelete(row)
    });
  }
  return res;
}

const formDialogVisible = ref(false);
// const formDialogReadonly = ref(false);
const tempRow = ref<GetInspectListResult>();
/**
 * 新增编辑
 * @param row
 */
const handleAddOrEdit = (row?: GetInspectListResult) => {
  tempRow.value = row || undefined;
  formDialogVisible.value = true;
};

const handleDelete = (row: GetInspectListResult) => {
  console.log(row, 'row');
  createConfirm('提示', '确认删除该核查与履约？', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(() => {
    deleteInspectTask(row.inspectNo).then(() => {
      createMessage.success('删除成功！');
      refresh();
    });
  });
};
// /**
//  * 查看
//  * @param row
//  */
// const handleViewDetail = (row: GetInspectListResult) => {
//   formDialogReadonly.value = true;
//   tempRow.value = row;
//   formDialogVisible.value = true;
// };
// /**
//  * 履约
//  */
// const complianceVisible = ref(false);
// const handleOpenCompliance = (row: GetInspectListResult) => {
//   complianceVisible.value = true;
//   tempRow.value = row;
// };

const goDetail = (row: GetInspectListResult) => {
  console.log(row);
  router.push(`/carbon-asset-management/inspect/detail?inspectNo=${row.inspectNo}`);
};
</script>
